const people = [
    {
        name: '周智博',
        role: 'Co-Founder / 前端&接口',
        imageUrl:
            '\微信图片_20230606192017.jpg',
    },
    {
        name: '辛昊飞',
        role: 'Co-Founder / 数据库&接口',
        imageUrl:
            '\微信图片_20230606192029.jpg',
    },
    {
        name: '王悦嘉',
        role: 'Co-Founder / 推荐算法',
        imageUrl:
            '\微信图片_20230606192023.jpg',
    },
    {
        name: '吴尚璞',
        role: 'Co-Founder / 前端',
        imageUrl:
            '\微信图片_20230606192035.jpg',
    },
    {
        name: 'Fortune magic cube',
        role: 'The logo of our company',
        imageUrl:
            '\微信图片_20230606192426.jpg',
    },
    // More people...
]

export default function Example_about() {
    return (
        <div className="bg-white py-24 sm:py-32">
            <img
                //style={{ width: 600, height: 500 }}
                src="\微信图片_20230606191739.jpg"
                alt=""
                className="absolute inset-0 -z-10 h-full w-full object-cover object-right md:object-center"
            />
            <div className="mx-auto grid max-w-7xl gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
                <div className="max-w-2xl">
                    <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
                        Meet our leadership
                    </h2>
                    <p className="mt-6 text-lg leading-8 text-gray-600">
                        Four members of the team are from the computer finance
                        experimental class of Nanjing University. Sincerity
                        smooth the way to success！
                    </p>
                </div>
                <ul
                    role="list"
                    className="grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2"
                >
                    {people.map(person => (
                        <li key={person.name}>
                            <div className="flex items-center gap-x-6">
                                <img
                                    className="h-16 w-16 rounded-full"
                                    src={person.imageUrl}
                                    alt=""
                                />
                                <div>
                                    <h3 className="text-base font-semibold leading-7 tracking-tight text-gray-900">
                                        {person.name}
                                    </h3>
                                    <p className="text-sm font-semibold leading-6 text-indigo-600">
                                        {person.role}
                                    </p>
                                </div>
                            </div>
                        </li>
                    ))}
                </ul>
            </div>
        </div>
    )
}
